<template>
	<view>
		<view>
			<u-picker :show="show" :columns="options" @cancel="cancel" @confirm="confirm" @change="changeHandler"
				:factory="factory"></u-picker>
		</view>
		<view class="random  flex-direction flex align-center justify-center" @click="randomTask">
			<view style="color: #FFFFFF;font-size: 24rpx;">发送</view>
			<view style="color: #FFFFFF;font-size: 24rpx;">图纸</view>
		</view>
		<!-- 弹窗 -->
		<uni-popup id="popup" ref="sheet" type="bottom" :animation="true">
			<scroll-view class="uni_popup" scroll-y="true" style="padding:30rpx;background-color: #fff;height: 652rpx;">
				<view class="">
					<h3 style="text-align: center;">上传设计图</h3>
					<!-- 设计图为空 -->
					<view class="flex align-center justify-center" style="margin: 30rpx auto;">
						<view>
							<image style="width: 224rpx;height: 224rpx;" src="../../static/plate/Upload.png" mode="">
							</image>
							<view style="text-align: center;color: rgba(30,30,30,0.3);line-height: 36rpx;">
								还没有设计图
							</view>
						</view>
					</view>
					<!--  -->
					<view class="flex align-center justify-center" style="margin: 30rpx auto;">
						<view class="flex align-center justify-between">
							<!-- 	<image style="width: 82rpx;height: 82rpx;" src="../../static/plate/Upload.png" mode="">
							</image> -->
							<!-- 	<view style="text-align: left;line-height: 36rpx;">
								<view style="font-size: 28rpx;color: #1E1E1E;">
									重庆碧水望江三水二期(橱柜设计
									图).DWG
								</view>
								<view style="font-size: 24rpx;color: rgba(30,30,30,0.3);">
									231.32 M
								</view>
							</view> -->
							<!-- 		<view style="text-align: center;line-height: 36rpx;">
								<view style="font-size: 24rpx;color: #F84949;">
									删除
								</view>
							</view> -->
						</view>
					</view>
					<view class="flex justify-between" style="padding: 50rpx 0;">
						<image style="width: 312rpx;height: 108rpx;" src="../../static/plate/7578.png" mode=""
							@tap="onUpload(4)">
						</image>
						<image style="width: 312rpx;height: 108rpx;" src="../../static/plate/8378.png" mode=""></image>
						<!-- <image style="width: 312rpx;height: 108rpx;" src="../../static/plate/up.png" mode=""></image> -->
					</view>
				</view>
			</scroll-view>
		</uni-popup>
		<mescroll-body ref="mescrollRef" :fixed="false" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="{auto: false, bgColor: '#FFFFFF'}" :up="upOption">
			<l-file ref="lFile" :logo="logo" @up-success="onSuccess"></l-file>
			<image :src="backGroundPicture" mode="" style="width:100vw;height: 560rpx;z-index: -1;"></image>
			<hx-navbar ref="hxnb" :config="config">
				<block slot="right">
					<image @click="collection()" v-if="collected == 0"
						style="justify-content: right;width: 64rpx;height: 64rpx;margin-right:30rpx;"
						src="../../static/topic/collection.png" mode="aspectFit">
					</image>
					<image @click="collect()" v-if="collected == 1"
						style="justify-content: right;width: 64rpx;height: 64rpx;margin-right:30rpx;"
						src="../../static/install/8007.png" mode="aspectFit">
					</image>
					<!-- 分享 -->
					<!-- <image style="justify-content: right;width: 64rpx;height: 64rpx;margin-right:30rpx;"
						src="../../static/topic/share.png" mode="aspectFit">
					</image> -->
				</block>
			</hx-navbar>
			<view style="padding:0 30rpx;">
				<view class="detailBox">
					<view class="flex align-center justify-center" style="padding: 30rpx 30rpx 0 30rpx;height: 70%;">
						<view
							style="margin-top: 10rpx;border: 1rpx solid rgba(30,30,30,0.1);width: 96rpx;height: 96rpx;">
							<image :src="dataList.logo" style="width: 90rpx;height: 90rpx;"></image>
							<image :src="dataList.image" style="width: 90rpx;height: 90rpx;"></image>
						</view>
						<view style="margin-left: 35rpx;">
							<view style="color: #1E1E1E;font-size: 32rpx;">{{dataList.shopsName}}</view>
							<view style="color: rgba(30,30,30,0.3);">{{dataList.introduction}}</view>
						</view>
					</view>
					<view class="liveHouse" style="">
						正在直播
					</view>
				</view>
				<view class="production flex justify-between align-center" style="margin-top: 30rpx;padding:0 25rpx ;">
					<view class="flex align-center">
						<image src="../../static/topic/7813.png" mode=""
							style="width:52rpx;height: 52rpx;margin-top: 5rpx;"></image>
						<view style="font-size: 32rpx;margin-left: 15rpx;font-weight:650;">该厂家有您的一笔订单在生产</view>
					</view>
					<view style="width: 64rpx;height: 64rpx;">
						<image src="../../static/topic/7814.png" mode="" style="width: 100%;height: 100%;"></image>
					</view>
				</view>
				<view style="margin-top: 30rpx;flex-wrap: wrap;" class="flex  align-center ">
					<view v-for="(item, index) in indexList" :key="index"
						style="height:380rpx;width: 300rpx;margin:20rpx;">
						<view style="background-color: #FFFFFF;border-radius: 20rpx;" @click="detail(item.id)">
							<view style="position: relative;">
								<image :src="item.image" mode=""
									style="height:250rpx;width:300rpx;border-radius: 20rpx;">
								</image>
								<image v-if="item.environmentalProtection == 0" class="imageIco"
									src="../../static/plate/7816.png" mode=""></image>
								<image class="imageIco" v-if="item.environmentalProtection == 1"
									src="../../static/plate/8374.png" mode=""></image>
								<image class="imageIco" v-if="item.environmentalProtection == 2"
									src="../../static/plate/8375.png" mode=""></image>
							</view>
							<view style="margin:10rpx 0;font-size:24rpx;color: #1E1E1E;"><text
									style="font-size: 36rpx;font-weight: 650;margin-left: 15rpx">¥{{item.guidePrice}}元/m²</text>
							</view>
							<view style="font-size: 28rpx;color: #333333;margin-left: 15rpx;padding: 10rpx 5rpx;">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<!-- 收藏弹窗 -->
		<uni-popup id="popup" ref="collection" type="bottom" :animation="true">
			<view style="text-align: center;padding: 30rpx;background-color: #ECECECFF;" @click="uncollect(id)">
				取消收藏
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; //引入滚动
	import baseUrl from '@/common/config.js'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				upOption: {
					auto: false,
					empty: {
						tip: '~ 无更多数据 ~'
					},
					textNoMore: '--没有更多了--',
					noMoreSize: 3,
				},
				config: {
					title: '',
					color: '#1E1E1EFF',
					backgroundColor: [1, 'transparent'],
					border: true,
					rightSlot: true,
					// #ifdef H5
					backPage: '',
					// #endif
				},
				indexList: [],
				dataList: [],
				// 判断是否收藏
				collected: '',
				id: '',
				backGroundPicture: '',
				show: false,
				factory: 0,
				options: [
					[]
				],
				project: {},
				orderNum: "",
				logo: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F00%2F07%2F155788a6d8a5c42.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619847627&t=2da40b583002205c204d980b54b35040',
			}
		},
		onLoad(e) {
			if (e.data == null) {
				this.id = e.id
				console.log('工厂', this.id)
			} else {
				let data = JSON.parse(e.data)
				this.id = data.id
				this.backGroundPicture = data.backGroundPicture
			}
			this.token = this.$cache.get('token')
			this.type = this.$cache.get('type')
			this.objectList(1, 10)
		},
		methods: {
			onSuccess(res) {
				console.log(this.orderNum, '自治县初中')
				let data = {
					gcId: this.id,
					orderNum: this.orderNum,
					url: res.data.result
				}
				this.$api.drawing(data).then((res) => {
					this.$refs.sheet.close()
				})

			},
			/* 上传 */
			onUpload(e) {
				/**
				 * url：上传接口地址
				 * name：附件key,服务端根据key值获取文件流，默认file,上传文件的key
				 * header: 上传接口请求头
				 */
				this.$refs.lFile.upload({
					//替换为你的上传接口地址
					url: 'www.cohome.com.cn/api' + '/universal/uploadCloud',
					// 服务端接收附件的key
					name: 'file',
					//根据你接口需求自定义 (优先不传content-type,安卓端无法收到参数再传)
					header: {
						'Authorization': uni.getStorageSync('token'),
						// 'uid': '27682',
						// 'client': 'app',
					},
					// 限制选择附件的大小上限，默认10M
					// maxSize: 20,

					// 若需要在body单独添加附件名或附件大小如下方式传入组件：
					// addName: 'file',
					// addSize: '后端要的附件大小字段key'

					// body参数直接写key,value,如：
					// date: '2020-1-1',
					exce: e,
					type: 4
					// key2: 'value2',
				});
			},
			// 弹窗
			randomTask() {
				this.$api.getProjectList().then((res) => {
					console.log("印刷术", res);
					this.project = res.data.result
					res.data.result.forEach((item) => {
						this.options[0].push(item.name)
					})
					this.show = true
				})

			},
			confirm(e) {
				console.log(String(this.options[0]), '阿达瓦大我');
				this.project.forEach((item) => {
					if (String(this.options[0]) == item.name) this.orderNum = item.orderNum
				})
				this.show = false;
				this.options[0] = [];
				this.$refs.sheet.open()
			},
			// 收藏
			collection() {
				let data = {
					id: this.id,
					collectType: 3,
					status: 1
				}
				this.$api.addCollect(data).then((res) => {
					console.log('收藏', res)
					this.objectList(1, 10)
				})
			},
			collect() {
				this.$refs.collection.open()
			},
			// 取消收藏
			uncollect() {
				let data = {
					id: this.id,
					collectType: 3,
					status: 0
				}
				this.$api.unCollect(data).then((res) => {
					console.log('取消收藏', res)
					this.$refs.collection.close()
					this.objectList(1, 10)
				})
			},
			// 刷新页面
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			upCallback(e) {
				this.objectList(e.num, 10)
			},
			objectList(num, size) {
				let data = {
					pageNo: num,
					gcId: this.id,
					pageSize: size
				}
				if (this.token == null) {
					this.$api.goodsPublicList(data).then((res) => {
						this.collected = 0
						this.dataList = res.data.result.gcInfo
						console.log('哈哈哈', res)
						if (num == 1) {
							this.indexList = res.data.result.pageResult.list
						} else {
							this.indexList = this.indexList.concat(res.data.result.pageResult.list)
						}
						this.mescroll.endBySize(this.indexList.length, res.data.result.pageResult.total);
					})
				} else {
					this.$api.goodsList(data).then((res) => {
						this.collected = res.data.result.count
						this.dataList = res.data.result.gcInfo
						console.log('哈哈哈1', res) 
						if (num == 1) {
							this.indexList = res.data.result.pageResult.list
						} else {
							this.indexList = this.indexList.concat(res.data.result.pageResult.list)
						}
						this.mescroll.endBySize(this.indexList.length, res.data.result.pageResult.total);
					})
				}
			},
			// 商品详情
			detail(id) {
				this.$tools.goPageNoAuth('/clientEnd/page/plate/plateDetail?id=' + id)
			},
			cancel() {
				this.options[0] = []
				this.show = false
			},
			changeHandler(e) {
				console.log(JSON.parse(e), '行政村')
			},
		}
	}
</script>

<style scoped>
	.imageIco {
		width: 78rpx;
		height: 32rpx;
		margin-right: 30rpx;
		position: absolute;
		right: 0rpx;
		bottom: 20rpx;
	}

	.detailBox {
		width: 690rpx;
		height: 352rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: -200rpx;
	}

	.liveHouse {
		border-top: 1rpx solid rgba(30, 30, 30, 0.1);
		margin: 0 30rpx;
		text-align: center;
		padding: 30rpx 0;
		color: #1E1E1E;
		font-size: 24rpx;
	}

	.production {
		width: 690rpx;
		height: 100rpx;
		background: #FFFFFF;
		color: #1E1E1E;
		font-size: 32rpx;
		border-radius: 20rpx;
	}

	.random {
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		background: linear-gradient(180deg, rgba(255, 98, 98, 1) 0%, rgba(255, 51, 51, 1) 100%);
		border-radius: 50%;
		box-shadow: 0px 6px 9px 0px rgba(255, 221, 221, 1);
		z-index: 1000;
		right: 20rpx;
		/*  #ifdef APP-PLUS */
		bottom: 230rpx;
		/*  #endif */
		/*  #ifdef H5 */
		bottom: 330rpx;
		/*  #endif */
	}
</style>